<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <style>
        body,
        html {
            margin: 0 atuo;
            padding: 0;
        }

        * {
            list-style: none;
            list-style-type: none;
            margin: 0 atuo;
            padding: 0;
        }

        #treeData li {
            line-height: 20px;
            background-color: lightblue;
            padding-left: 30px;
        }

        li>ul {
            display: none;
        }

        li.open>ul {
            display: block;
        }
    </style>

</head>

<body>
    <div id="treeData"></div>

    <script type="text/babel">


            var treeData=[{
                mtKey:'1',
                name:'1',
                open:open,
                children:[{
                    mtKey:'21',
                    name:'21',
                    children:[{
                        mtKey:'211',
                        name:'211',
                        open:false,
                        children:[]
                    },
                    {
                        mtKey:'222',
                        name:'222',
                        open:false,
                        children:[]

                    }
                ]
                 },
                 {
                    mtKey:'22',
                    name:'22',
                    open:false,
                    children:[]

                 }]
            },
            {
                mtKey:'2',
                name:'2',
                open:false,
                children:[]
            }];

            class Tree extends React.Component {
                constructor(props) {
                    super(props);
                    this.buildTree=this.buildTree.bind(this);
                    this.state={
                        treeData:props.treeData
                    }
                }

                setChildrenClosed(children)
                {
                    children.forEach((item)=>{
                        item.open='close';
                    })
                }

                handlerItemClick=(e,item)=>{
                    // 阻止合成事件间的冒泡
                    e.stopPropagation();
                    item.open=!item.open;

                    //下级都改成close
                    this.setChildrenClosed(item.children);

                    this.setState({
                        treeData:this.state.treeData
                    })
                }

                buildTree(treeData){
            
                    return <ul className="">
                        {
                            treeData.map((item)=>{
                                return <li key={item.mtKey} className={item.open?"open":"close"} onClick={(e)=>{this.handlerItemClick(e,item)}} >
                                            <a>{item.name}</a>
                                            {this.buildTree(item.children)}
                                        </li>
                            })  
                        }
                     </ul>
                  


            
                }
                
                render() {
                    var that=this;
                    return that.buildTree(this.state.treeData)         
                }
            }

            ReactDOM.render(
                <Tree  treeData={treeData} />,
                document.getElementById('treeData')
            );

</script>

</body>

</html>